<template>
  <div class="text" v-bind:class="{ box: isbox, border: isborder }">
    <div :class="{ inner: isinner }">春夏</div>
    <div :class="classobj">秋冬</div>
    <div :class="classmeal">三餐四季</div>

    <button @click="isbox = !isbox">切换</button>
  </div>
</template>
<script setup>
import { computed } from "vue";
const classobj = {
  inner: true,
  border: true
};
// const classMeal = computed(() => ({
//   meal: isMeal.value
// }));
const classmeal = computed(() => ({
  meal: ismeal.value
}));
const ismeal = ref(true);
import { ref } from "vue";
const isbox = ref(false);
const isborder = ref(true);
const isinner = ref(true);
</script>
<style>
.text {
  line-height: 30px;
  text-align: center;
}
.box {
  width: 100%;
  height: 100%;
  background-color: red;
}
.inner {
  margin: 2px;
  width: 50%;
  height: 50%;
  background-color: aquamarine;
  border: 2px solid rgb(241, 213, 4);
}
.border {
  border: 1px solid rgb(232, 12, 78);
}
.meal {
  background-color: rgb(15, 165, 126);
}
</style>
